<template>
    <div class="question-box">
        <div class="pro-box">
             <div class="pro-header">
                <div class="course-info">
                    <div class="course-header">
                        <h1>产品结构设计基础</h1>
                        <div class="course-duration">
                            <span class="badge">4年制</span>
                            <span class="badge">学士</span>
                        </div>
                    </div>
                    <p class="course-description">
                        专业介绍占位专业介绍占位专业介绍占位专业介绍占位专业介绍占位专业介绍占位专业介绍占位专业介绍占位专业介绍占位专业介绍占位专业介绍占位专业介绍占位专业介绍占位专业介绍占位专业介绍占位专业介绍占位专业介绍占位专业介绍占位专业介绍占位专业介绍占位专业介绍占位专业介绍占位专业介绍占位专业介绍占位专业介绍占位专业介绍占位专业介绍占位专业介绍占位专业介绍占位专业介绍占位专业介绍占位专业介绍占位专业介绍占位专业介绍占位专业介绍占位专业介绍占位专业介绍占位专业介绍占位专业介绍占位专业介绍占位专业介绍占位专业介绍占位专业介绍占位专业介绍占位专业介绍占位专业介绍占位专业介绍占位专业介绍占位专业介绍占位专业介绍占位专业介绍占位专业介绍占位专业介绍占位专业介绍占位专业介绍占位专业介绍占位专业介绍占位专业介绍占位专业介绍占位专业介绍占位专业介绍占位专业介绍占位专业介绍占位专业介绍占位专业介绍占位专业介绍占位专业介绍占位专业介绍占位专业介绍占位专业介绍占位专业介绍占位专业介绍占位专业介绍占位专业介绍占位专业介绍占位专业介绍占位专业介绍占位专业介绍占位专业介绍占位专业介绍占位专业介绍占位专业介绍占位专业介绍占位专业介绍占位专业介绍占位专业介绍占位专业介绍占位专业介绍占位专业介绍占位专业介绍占位专业介绍占位专业介绍占位专业介绍占位专业介绍占位专业介绍占位专业介绍占位专业介绍占位专业介绍占位专业介绍占位专业介绍占位专业介绍占位专业介绍占位专业介绍占位专业介绍占位专业介绍占位专业介绍占位专业介绍占位专业介绍占位专业介绍占位专业介绍占位专业介绍占位专业介绍占位专业介绍占位专业介绍占位专业介绍占位专业介绍占位专业介绍占位专业介绍占位专业介绍占位专业介绍占位
                    </p>
                </div>
                <div class="maps">
                    <div class="map-card">
                        <img src="@/assets/zy1.png" alt="">
                    </div>
                    
                    <div class="map-card">
                        <img src="@/assets/zy2.png" alt="">
                    </div>
                </div>
            </div>
            <div class="requirements">
                <div class="requirements-box">
                    <div class="title">
                        <img src="@/assets/edu.png" alt="">
                        <span>培养要求</span>
                    </div>
                    <ul class="chapters">
                        <li class="chapter-item" v-for="chapter in chapters" :key="chapter.id">
                            <span class="chapter-number">{{ chapter.id }}</span>
                            <span>{{ chapter.title }}</span>
                        </li>
                    </ul>
                    <div class="contents">
                        <div  v-for="(value,index) in list" :key="index" class="chapter-list">
                            <el-collapse v-model="activeNames">
                                <el-collapse-item :name="index">
                                    <template #title>
                                        <div class="outline-title section">
                                            <div class="chapter-left">
                                                <div class="chapter-icon">章</div>
                                                <div class="chapter-title">第一节  产品结构设计基础</div>
                                            </div>
                                        </div>
                                    </template>
                                    <div class="outline-title point">
                                        <div class="chapter-left">
                                            <div class="chapter-icon">节</div>
                                            <div class="chapter-title">产品结构设计基础</div>
                                        </div>
                                        <!-- <div class="chapter-right">
                                            <el-button class="edit">
                                                <img src="@/assets/edit.png" alt="">
                                                <span>编辑</span>
                                            </el-button>
                                            <el-button class="dele">
                                                <img src="@/assets/dele.png" alt="">
                                                <span>删除</span>
                                            </el-button>
                                        </div> -->
                                    </div>
                                </el-collapse-item>
                            </el-collapse>
                        </div>
                    </div>
                </div>
            </div>
            <div class="two-columns">
                <div class="column">
                    <div class="title">
                        <img src="@/assets/yq.png" alt="">
                        <span>能力要求</span>
                    </div>
                    <div class="content-placeholder">
                        <span>能力要求占位能力要求占位能力要求占位能力要求占位能力要求占位能力要求占位能力要求占位能力要求占位能力要求占位能力要求占位能力要求占位能力要求占位能力要求占位能力要求占位能力要求占位能力要求占位能力要求占位能力要求占位能力要求占位能力要求占位能力要求占位能力要求占位能力要求占位能力要求占位能力要求占位能力要求占位能力要求占位能力要求占位能力要求占位能力要求占位能力要求占位能力要求占位能力要求占位能力要求占位能力要求占位能力要求占位能力要求占位能力要求占位能力要求占位能力要求占位能力要求占位能力要求占位能力要求占位能力要求占位能力要求占位能力要求占位能力要求占位能力要求占位能力要求占位能力要求占位能力要求占位能力要求占位能力要求占位能力要求占位能力要求占位能力要求占位能力要求占位能力要求占位能力要求占位能力要求占位能力要求占位能力要求占位能力要求占位能力要求占位能力要求占位能力要求占位能力要求占位能力要求占位能力要求占位能力要求占位能力要求占位能力要求占位</span>
                    </div>
                </div>
                
                <div class="column">
                    <div class="title">
                        <img src="@/assets/mb.png" alt="">
                        <span>目标岗位</span>
                    </div>
                    <div class="content-placeholder">
                        <span>目标岗位占位目标岗位占位目标岗位占位目标岗位占位目标岗位占位目标岗位占位目标岗位占位目标岗位占位目标岗位占位目标岗位占位目标岗位占位目标岗位占位目标岗位占位目标岗位占位目标岗位占位目标岗位占位目标岗位占位目标岗位占位目标岗位占位目标岗位占位目标岗位占位目标岗位占位目标岗位占位目标岗位占位目标岗位占位目标岗位占位目标岗位占位目标岗位占位目标岗位占位目标岗位占位目标岗位占位目标岗位占位目标岗位占位目标岗位占位目标岗位占位目标岗位占位目标岗位占位目标岗位占位目标岗位占位目标岗位占位目标岗位占位目标岗位占位目标岗位占位目标岗位占位目标岗位占位目标岗位占位目标岗位占位目标岗位占位目标岗位占位目标岗位占位目标岗位占位目标岗位占位目标岗位占位目标岗位占位目标岗位占位目标岗位占位目标岗位占位目标岗位占位目标岗位占位目标岗位占位目标岗位占位目标岗位占位目标岗位占位目标岗位占位目标岗位占位目标岗位占位目标岗位占位目标岗位占位目标岗位占位目标岗位占位目标岗位占位目标岗位占位目标岗位占位目标岗位占位目标岗位占位目标岗位占位目标岗位占位目标岗位占位目标岗位占位目标岗位占位目标岗位占位目标岗位占位目标岗位占位目标岗位占位目标岗位占位目标岗位占位目标岗位占位目标岗位占位</span>
                    </div>
                </div>
            </div>
        </div>
        </div>
</template>
<script setup>
    import { ref } from 'vue'
    const list  = ref([0,1,2,3,4,5]);
</script>
<style scoped>
    .question-box{position: relative;}
    .pro-box{border-radius: 8px;width: 100%;height: calc(85vh + 20px);background: linear-gradient( 135deg, #E6EEF9 0%, #E3EBF8 100%);}
    .pro-header{ display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 1px solid #e0e0e0; padding: 30px; }
    .course-header{display: flex;flex-direction: row;align-items: center;gap: 20px;}
    .course-info h1 { font-size: 28px; color: #000; margin-bottom: 10px;text-align: left;font-family: 微软雅黑, Microsoft YaHei, SimSun; }
    .course-duration { display: flex; gap: 15px; margin-bottom: 15px; }
    .badge { background-color: #fff; padding: 4px 10px; border-radius: 20px; font-size: 12px;height: 15px;line-height: 15px; }
    .badge:first-child{border: 1px solid #AB773D; color: #AB773D; background: rgba(226,177,123,0.1);}
    .badge:last-child{border: 1px solid #3869E7; color: #3869E7; background: rgba(56,105,231,0.2);}
    .course-description { color: #666; line-height: 1.8; max-width: 800px;text-align: left;font-family: 微软雅黑, Microsoft YaHei, SimSun;cursor: pointer;display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 7; overflow: hidden; text-overflow: ellipsis;font-size: 14px; }
    .maps { display: flex; gap: 20px; }
    .map-card { padding: 20px; text-align: center; }
    .map-card img{width: 100%; }
    .requirements{background: linear-gradient( 135deg, #2E7CF4 0%, #0457D5 100%);border-radius: 10px;display: flex;flex-direction: row;align-items: center;margin: 30px 30px 0 30px;}
    .requirements .requirements-box{width: 100%;background: #fff;border-radius: 10px;margin-top: 5px;margin-bottom: 10px;margin-left: 1px;margin-right: 1px;}
    .requirements .requirements-box .title{display: flex;flex-direction: row;align-items: center;padding: 10px 0 20px 20px;}
    .requirements .requirements-box .title img{width: 20px;height: 20px;}
    .requirements .requirements-box span{text-align: left;margin-left: 10px;font-weight: 600;font-family: 微软雅黑, Microsoft YaHei, SimSun;font-size: 16px;color: #000;}
    .requirements .contents{width: 100%;border-radius: 10px;padding-bottom: 20px;}
    .chapter-list{width: 98%;}
    .chapter-left{display: flex;flex-direction: row;align-items: center;}
    .chapter-icon{width: 25px;height: 25px; background: linear-gradient( 135deg, #2E7CF4 0%, #0457D5 100%)!important;border-radius: 25px;color: #fff;text-align: center;line-height: 25px;}
    .chapter-title{margin-left: 5px;font-family: 微软雅黑, Microsoft YaHei, SimSun;font-size: 14px;}
    .outline-title{display: flex;flex-direction: row;align-items: center;justify-content: space-between;}
    .chapter-right span{margin-left: 5px;font-family: 微软雅黑, Microsoft YaHei, SimSun;font-size: 14px;}
    .section{padding-left: 20px;background-color: #ffffff!important;}
    .point{padding: 10px 0 10px 50px;background-color: #F3F7FE;}
    .point .chapter-icon.orange{background: linear-gradient( 135deg, #D4A51D 0%, #D4721D 100%)!important;}
    .chapter-right .addpeer span{color: #1465E1;}
    .chapter-right .addchild span{color: #20AB62;}
    .chapter-right .edit span{color: #1465E1;}
    .chapter-right .dele span{color: #D4424A;}
    .chapter-right img{width: 20px;height: 20px;}
    .two-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; }
    .column { border-radius: 10px; padding: 20px;margin: 30px; }
    .column:first-child{ background: #C4CBFE; }
    .column:last-child{ background: #F6EAA9; }
    .column .title{display: flex;flex-direction: row;align-items: center;}
    .column .title img{width: 20px;height: 20px;}
    .content-placeholder{background: #E2E5FF;margin-top: 10px;padding: 20px;text-align: left;border-radius: 10px;font-family: 微软雅黑, Microsoft YaHei, SimSun;font-size: 14px;}
    .content-placeholder:last-child{background: #FBF5D4;}
    .content-placeholder span{display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; overflow: hidden; text-overflow: ellipsis;}
</style>